<script setup lang="ts">
import { SHORTCUT_PRIORITY, useConditionalShortcut, useShortcut } from '@/hooks/common/shortcut';
import { onMounted, ref, watch } from 'vue';
import QueryTable from '../home/modules/query-table.vue';
import Inner from './inner.vue';

const modal = ref(false);
const modal2 = ref(false);
const modal3 = ref(false);

// Page level shortcuts
const pageShortcut = useShortcut(SHORTCUT_PRIORITY.PAGE);

// Modal level shortcuts for conditional binding
const modal1Shortcut = useConditionalShortcut(modal, SHORTCUT_PRIORITY.MODAL);
const modal2Shortcut = useConditionalShortcut(modal2, SHORTCUT_PRIORITY.DIALOG);

function insertHandler() {
    modal.value = true;
}

function updateHandler() {
    window.$message.success('updateHandler!!!');
}

function deleteHandler() {
    window.$message.success('updateHandler!!!');
}

function saveHandler() {
    modal2.value = true;
}

function save2Handler() {
    modal2.value = false;
}

function helpHandler() {
    window.$message.success('helpHandler!!!');
}

function demoHandler() {
    modal3.value = true;
}

// Bind shortcuts after mount to ensure everything is properly initialized
onMounted(() => {
    // Bind page level shortcuts
    pageShortcut.bind('ctrl+I', insertHandler);
    pageShortcut.bind('Ctrl+U', updateHandler);
    pageShortcut.bind('Ctrl+D', deleteHandler);
    pageShortcut.bind('F1', helpHandler);
    pageShortcut.bind('Ctrl+H', demoHandler);

    // Bind modal shortcuts
    modal1Shortcut.bind('Ctrl+S', saveHandler);
    modal2Shortcut.bind('Ctrl+S', save2Handler);

    console.log('All shortcuts bound!');
});

// Watch modal visibility for logging (updateLayer is now automatic)
watch(modal, (newVal) => {
    if (newVal) {
        console.log(
            '🔴 Modal 1 opened - page shortcuts (Ctrl+I, Ctrl+U, Ctrl+D) should now be disabled'
        );
    } else {
        console.log(
            '🟢 Modal 1 closed - page shortcuts (Ctrl+I, Ctrl+U, Ctrl+D) should now be enabled'
        );
    }
});

watch(modal2, (newVal) => {
    if (newVal) {
        console.log(
            '🔴 Modal 2 opened - modal 1 shortcuts should now be disabled, only modal 2 shortcuts work'
        );
    } else {
        console.log('🟡 Modal 2 closed - modal 1 shortcuts should now be enabled');
    }
});
</script>

<template>
    <NSpace :wrap-item="false">
        <NGrid class="w-100%" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
            <NGi span="24">
                <NCard title="快捷键测试说明">
                    <p><strong>测试用例：</strong></p>
                    <ul>
                        <li>1. 按下 Ctrl+I 触发新增并打开弹窗1</li>
                        <li>2. 按下 Ctrl+U 触发更新</li>
                        <li>3. 按下 Ctrl+D 触发删除</li>
                        <li>4. 按下 F1 触发帮助功能</li>
                        <li>5. 弹窗1打开后，Ctrl+I、Ctrl+U、Ctrl+D、F1均失效</li>
                        <li>6. 弹窗1中按Ctrl+S触发保存并打开弹窗2</li>
                        <li>7. 弹窗2中按Ctrl+S触发保存2，弹窗1的Ctrl+S失效</li>
                        <li>8. 关闭弹窗后，页面快捷键恢复正常</li>
                    </ul>
                    <p><strong>当前状态：</strong></p>
                    <NSpace>
                        <NTag :type="!modal && !modal2 ? 'success' : 'default'"
                            >页面快捷键: {{ !modal && !modal2 ? '激活' : '禁用' }}</NTag
                        >
                        <NTag :type="modal && !modal2 ? 'warning' : 'default'"
                            >弹窗1快捷键: {{ modal && !modal2 ? '激活' : '禁用' }}</NTag
                        >
                        <NTag :type="modal2 ? 'error' : 'default'"
                            >弹窗2快捷键: {{ modal2 ? '激活' : '禁用' }}</NTag
                        >
                    </NSpace>
                </NCard>
            </NGi>
            <NGi span="12">
                <NButton @click="insertHandler">新增(Ctrl+I)</NButton>
                <NButton @click="updateHandler">更新(Ctrl+U)</NButton>
                <NButton @click="deleteHandler">删除(Ctrl+D)</NButton>
                <NButton @click="helpHandler">帮助(F1)</NButton>
                <NButton @click="demoHandler">测试(Ctrl+H)</NButton>
            </NGi>
            <NGi span="24">
                <QueryTable></QueryTable>
            </NGi>
        </NGrid>

        <!-- 弹窗1 -->
        <NModal v-model:show="modal" class="w-70%">
            <NCard title="弹窗1 - 快捷键测试">
                <p>这是第一层弹窗，具有较高的快捷键优先级。</p>
                <p><strong>当前快捷键状态：</strong></p>
                <ul>
                    <li>页面快捷键 (Ctrl+I, Ctrl+U, Ctrl+D): <NTag type="error">已禁用</NTag></li>
                    <li>弹窗1快捷键 (Ctrl+S): <NTag type="success">激活</NTag></li>
                </ul>
                <p>请按 Ctrl+S 测试弹窗1的快捷键功能</p>
                <template #footer>
                    <NSpace>
                        <NButton @click="saveHandler">保存(Ctrl+S)</NButton>
                        <NButton @click="modal = false">关闭</NButton>
                    </NSpace>
                </template>
            </NCard>
        </NModal>

        <!-- 弹窗2 -->
        <NModal v-model:show="modal2" class="w-50%">
            <NCard title="弹窗2 - 最高优先级快捷键">
                <p>这是第二层弹窗，具有最高的快捷键优先级。</p>
                <p><strong>当前快捷键状态：</strong></p>
                <ul>
                    <li>页面快捷键 (Ctrl+I, Ctrl+U, Ctrl+D): <NTag type="error">已禁用</NTag></li>
                    <li>弹窗1快捷键 (Ctrl+S): <NTag type="error">已禁用</NTag></li>
                    <li>弹窗2快捷键 (Ctrl+S): <NTag type="success">激活</NTag></li>
                </ul>
                <p>请按 Ctrl+S 测试弹窗2的快捷键功能（注意：弹窗1的Ctrl+S不会触发）</p>
                <template #footer>
                    <NSpace>
                        <NButton @click="save2Handler">保存2(Ctrl+S)</NButton>
                        <NButton @click="modal2 = false">关闭</NButton>
                    </NSpace>
                </template>
            </NCard>
        </NModal>

        <!-- 弹窗 3 -->
        <NModal v-model:show="modal3" class="w-50%">
            <NCard>
                <Inner></Inner>
            </NCard>
        </NModal>
    </NSpace>
</template>

<style scoped></style>
